<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="com.mconnect.msurvey.model.ResponderRecommended"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.mconnect.msurvey.controller.RecommendedManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/css/search_grid_style.css" />
 <style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	</style>
	<script type="text/javascript">
						$(function() {
							var plan =  $( "#r_id_plan" ).val();
							var typeOfPlan = $( "#typeOfPlan" ).val();
							
						$('#nextPage').click(function(){
							var startPage = parseFloat($( "#next" ).val());
							var page = startPage + 1;
								
							$.post(
								'searching/showRecommendContent.jsp',
								{
									pageNumber: page,
									id_plan: plan
												
								},
								function (content) {
									$('#users-contain').html(content);
									$( "#next" ).val(page);
									return false;
								}
							);
								
							});
						
						$('#previousPage').click(function(){
							var startPage = parseFloat($( "#next" ).val());
							var page = startPage - 1;
							
							if(page >= 1){
								$.get(
									'searching/showRecommendContent.jsp',
									{
										pageNumber: page,
										id_plan: plan			
									},
									function (content) {
										$('#users-contain').html(content);
										$( "#next" ).val(page);
										return false;
									}
								);
							}	
						});
						
						$('.recomendContent_dialogLink').click(function(){
							var _id = $(this).prev('input').val();
							var _firstname = $(this).prev('input').prev('input').val();
							var _lastname = $(this).prev('input').prev('input').prev('input').val();
							var _phone = $(this).prev('input').prev('input').prev('input').prev('input').val();
							var _mail = $(this).prev('input').prev('input').prev('input').prev('input').prev('input').val();
							
							if(typeOfPlan == 'technical'){
								$.post(
										'searching/showTechnicalRecommendDetails.jsp',
										{id_recommend: _id, firstname : _firstname, lastname: _lastname, phone: _phone, mail: _mail, id_plan : plan },
										function (data){
											$('body').append(data);
										}
									);
							}else{
								$.post(
										'searching/showRecommendDetails.jsp',
										{id_recommend: _id, firstname : _firstname, lastname: _lastname, phone: _phone, mail: _mail, id_plan : plan },
										function (data){
											$('body').append(data);
										}
									);
							}
							
							return false;
						});
						
					});
				</script>	
</head>
<body>
	
	<%	String pageN = request.getParameter("pageNumber");
		int pageNumber = 1;
		if(pageN !=  null){
			pageNumber = Integer.parseInt(pageN);
		}
		int id_plan = Integer.parseInt(request.getParameter("id_plan"));
		String firstname = request.getParameter("firstname");
		String lastname = request.getParameter("lastname");
		String phone = request.getParameter("phone");
		String mail = request.getParameter("mail");
		String status = request.getParameter("status");
		String type = request.getParameter("type");
		RecommendedManager rM = new RecommendedManager();
		PlanManager pM = new PlanManager();
		List<ResponderRecommended> recommendList = new ArrayList<ResponderRecommended>();
		recommendList = rM.getRecommendListById_plan(id_plan, pageNumber, firstname, lastname, mail, phone, status, type);
		
		if(recommendList.isEmpty() && pageN == null){
	%>
		
		<div class="ui-widget" style="width: 850px; margin-top: 20px;">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
				<strong>Brak poleceń w tym planie.</strong> <br /> <br> Wybierz inny plan.</p>
			</div>
		</div>
		<%}else{ %>
		<div class="clear"></div>
		<input type="hidden" id="r_id_plan" value="<%=id_plan %>">
		<input type="hidden" id="typeOfPlan" value="<%=pM.getTypeOfPlanByIdPlan(id_plan)%>">
		
		
		<div id="users-contain" class="ui-widget" style="width: 850px; ">
			<table id="users" class="ui-widget ui-widget-content" >
				<thead>
				<tr class="ui-widget-header ">
					<th>Imie</th>
					<th>Nazwisko</th>
					<th>Telefon</th>
					<th>Szczegóły</th>
				</tr>
				<tbody>
					<% for(ResponderRecommended recommend : recommendList){ %>
						<tr>
							<td> <%= recommend.getFirstName() %></td>
							<td><%=recommend.getLastName() %></td>
							<td><%=recommend.getPhone() %></td>
							<td><input type="hidden" value="<%=recommend.getMail() %>" /><input type="hidden" value="<%=recommend.getPhone() %>" /><input type="hidden" value="<%=recommend.getLastName() %>" /><input type="hidden" value="<%=recommend.getFirstName() %>" /><input type="hidden" value="<%=recommend.getId_recommended() %>" /><a class="recomendContent_dialogLink" href="#">szczegóły</a></td>
						</tr>
					<%} %>	
					<tr>
						<td colspan="5" id="form">
							<div>
									<div style="float: left; margin-top: 3px;"><a href="#" id="previousPage" style="display: block;"><img alt="Previous" src="resources/images/previous.png"> </a></div>
									<div style="float: left; margin-left: 5px;"><input type="text" id="next" style="width: 20px;"  value="1" ></div>
									<div style="float: left; margin-left: 5px; margin-top: 3px;"><a href="#" id="nextPage" style="display: block;"><img alt="Next" src="resources/images/next.png"> </a> </div>
							</div>
						 </td>
					</tr>
				</tbody>	
			</table>
		</div>
	<div class="clear"></div>
		<%} %>


</body>
</html>